//
//  ApprovePage.swift
//  GoCash
//
//  Created by jie on 2024/5/15.
//

import SwiftUI

struct ApprovePage: View {
    
    var body: some View {
        ZStack {
            Color(hex: 0xF8F7FE).ignoresSafeArea()
            ScrollView {
                VStack {
                    
                    ApproveProgressIndecateView()
                    
                    VStack {
                        Color(.clear).frame(height: 20)
                        ApproveStateItem(title: .constant("Información personal"), state: .constant(2))
                        
                        HStack {
                            COLOR_5AC692.frame(width: 1, height: 32)
                            Spacer()
                        }.padding(.leading, 38)
                        
                        ApproveStateItem(title: .constant("Información del contacto"), state: .constant(1))
                        
                        HStack {
                            COLOR_5AC692.frame(width: 1, height: 32)
                            Spacer()
                        }.padding(.leading, 38)
                        
                        ApproveStateItem(title: .constant("Información de identidad"), state: .constant(0))
                        
                        Spacer()
                    }.background(.white).cornerRadius(16)
                    
    //                Spacer()
                }
            }.padding(.top, 8)
        }
        .navigationStyle(title: "Approve", whiteType: false)
        
        
        
    }
}

#Preview {
    ApprovePage()
}



struct ApproveStateItem: View {
    
    @Binding var title: String
    @Binding var state: Int
    
    var body: some View {
        HStack {
            if state == 0 {
                Rectangle().frame(width: 24, height: 24).cornerRadius(12).foregroundColor(COLOR_5AC692.opacity(0.2)).padding(.leading, 26)
            } else if state == 1 {
                Rectangle().frame(width: 24, height: 24).cornerRadius(12).foregroundColor(COLOR_5AC692).padding(.leading, 26)
            } else if state == 2 {
                Image(systemName: "checkmark.circle.fill").resizable().foregroundColor(COLOR_5AC692).frame(width: 24, height: 24).padding(.leading, 26)
            }
            
            let opacity = state==0 ? 0.5:1
            Text(title).font(Font.system(size: 16, weight: .medium)).foregroundColor(COLOR_312A31).opacity(opacity)
            
            Spacer()
            
            
            if state == 1 {
                NavigationLink(destination:  ApprovePersonalInfoView()) {
                    ZStack {
                        MAIN_COLOR.cornerRadius(15).frame(width: 76, height: 30)
                        Text("A verificar").font(Font.system(size: 12, weight: .regular)).foregroundColor(.white).padding(0)
                    }.padding(.trailing, 26)
                }
                
            } else if state == 2 {
                ZStack {
                    Color(hex: 0xF8F6FF).cornerRadius(15).frame(width: 76, height: 30)
                    Text("Verificado").font(Font.system(size: 12, weight: .regular)).foregroundColor(COLOR_BD9DBD).padding(0)
                }.padding(.trailing, 26)
            }
            
        }
    }
}


struct ApproveProgressIndecateView: View {
    var body: some View {
        VStack {
            HStack(spacing: 24) {
                VStack {
                    ZStack {
                        Color(hex: 0xE8DDF7).cornerRadius(20)
                        Image(systemName: "1.circle.fill").foregroundColor(MAIN_COLOR)
                    }.frame(width: 40, height: 40)
                    Text("$800").font(Font.system(size: 14, weight: .bold)).foregroundColor(MAIN_COLOR)
                }
                Image(systemName: "arrow.forward").foregroundColor(Color(hex: 0xE8DDF7)).padding(.bottom, 20)
                VStack {
                    ZStack {
                        Color(hex: 0xE8DDF7).cornerRadius(20)
                        Image(systemName: "2.circle.fill").foregroundColor(MAIN_COLOR)
                    }.frame(width: 40, height: 40)
                    Text("$800").font(Font.system(size: 14, weight: .bold)).foregroundColor(MAIN_COLOR)
                }
                Image(systemName: "arrow.forward").foregroundColor(Color(hex: 0xE8DDF7)).padding(.bottom, 20)
                VStack {
                    ZStack {
                        Color(hex: 0xE8DDF7).cornerRadius(20)
                        Image(systemName: "3.circle.fill").foregroundColor(MAIN_COLOR)
                    }.frame(width: 40, height: 40)
                    Text("$800").font(Font.system(size: 14, weight: .bold)).foregroundColor(MAIN_COLOR)
                }
            }
            
            HStack(alignment: .top, spacing: 0) {
                Text("Completa la datos personales para aumentar el importe del préstamo en un 20").font(Font.system(size: 12)).foregroundColor(COLOR_7C697C).padding(EdgeInsets(top: 18, leading: 26, bottom: 0, trailing: 26))
//                    Text("20").font(Font.system(size: 12, weight: .bold)).foregroundColor(MAIN_COLOR).padding(EdgeInsets(top: 18, leading: 26, bottom: 0, trailing: 26))
            }
            Color(.clear).frame(height: 20)
        }
    }
}
